<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网络错误页面</title>
    <style>
        body{ margin: 0; }
        .page{ height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
        .page .center{ height: 50px; background-color: cyan; width: 100%;}
        .box{ display: flex; flex-direction: column; align-items: center; margin-top: 40%;}
        img{ width: 150px; margin: 25px 0; }
        .tips{ font-size: 14px; font-weight: normal; color: #aaa; }
        .btn{ appearance: none; -webkit-appearance: none; box-shadow: none; outline: none; padding: 6px 12px; box-sizing: border-box; background-color: #fff; border: 1px solid transparent; border-radius: 3px;}
        .btn.btn-primary{ border-color: blue; }
    </style>

</head>

<body>

    <div class="page">
        <main>
            <div class="box">
                <img class="img" src="">
                
                <div class="tips">网络错误，轻触屏幕重新加载</div>
                
            </div>
        </main>
    </div>
    <script>
        
        document.querySelector('body').addEventListener('click', function(){
            console.log('reload');
        });
    </script>
</body>
</html>